import React, { Component } from "react";
import { withRouter } from "umi";
import { ConfigProvider, message } from "antd";
import { I18nProvider } from "@lingui/react";
import { getLocale } from "utils";

const { i18n } = require("../../src/utils/config");
import zh_CN from "antd/lib/locale-provider/zh_CN";
import en_US from "antd/lib/locale-provider/en_US";
import pt_BR from "antd/lib/locale-provider/pt_BR";
import BaseLayout from "./BaseLayout";

const languages = {
    zh: zh_CN,
    en: en_US
};
const { defaultLanguage } = i18n;

message.config({
    maxCount: 1,
    duration: 3,
    rtl: true,
    top: '20vh',
});

@withRouter
class Layout extends Component {
    state = {
        catalogs: {}
    };

    language = defaultLanguage;

    componentDidMount() {
        const language = getLocale();
        this.language = language;
        language && this.loadCatalog(language);
    }

    shouldComponentUpdate(nextProps, nextState) {
        const language = getLocale();
        const preLanguage = this.language;
        const { catalogs } = nextState;

        if (preLanguage !== language && !catalogs[language]) {
            language && this.loadCatalog(language);
            this.language = language;
            return false;
        }
        this.language = language;

        return true;
    }

    loadCatalog = async language => {
        const catalog = await import(
            /* webpackMode: "lazy", webpackChunkName: "i18n-[index]" */
            `@lingui/loader!../locales/${language}/messages.json`
            );

        this.setState(state => ({
            catalogs: {
                ...state.catalogs,
                [language]: catalog
            }
        }));
    };

    render() {
        const { children } = this.props;
        const { catalogs } = this.state;
        let language = getLocale();
        // If the language pack is not loaded or is loading, use the default language
        if (!catalogs[language]) language = defaultLanguage;

        return (
            <ConfigProvider locale={languages[language]}>
                <I18nProvider language={language} catalogs={catalogs}>
                    <BaseLayout>{children}</BaseLayout>
                </I18nProvider>
            </ConfigProvider>
        );
    }
}

export default Layout;
